<template>
	<div id="Search">
		<!--view-->
		<div class="main">
			<div class="search-box">
				<search ref="search" placeholder="输入你想要的" @on-submit="submit" @on-change="getResult" @on-result-click="resultClick" @on-cancel="canelSearch" :results="results" v-model="value"></search>
			</div>
			<div class="tags">
				<div class="tit">
					<h5>热门搜索</h5>
					<a class="reset" @click="hotSearch()"><i class="pm-icon icon-refresh"></i>换一批</a>
				</div>
				<div class="list">
					<a href="javascript:;" v-for="(item,index) in hotWord" :key="index" @click="selectClick(item.search_keyword)">{{item.search_keyword}}</a>
				</div>
			</div>
			<div class="tags">
				<div class="tit">
					<h5>搜索记录</h5>
					<a class="reset" @click="clearRecord"><i class="pm-icon icon-delete"></i>清除记录</a>
				</div>
				<div class="list">
					<a href="javascript:;" v-for="(item,index) in searchCode" :key="index" @click="selectClick(item.search_keyword)">{{item.search_keyword}}</a>
				</div>
			</div>
		</div>
		<toast v-model="success" type="text" width="2.8rem">{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery';
	import {
		Search,
		Group,
		Cell,
		Toast
	} from 'vux';

	export default { //变量
		data() {
			return {
				results: [],
				searchCode: [],
				hotWord: [],
				value: '',
				search_keyword: '',
				success: false,
				msg: ''
			}
		},
		components: {
			Search,
			Group,
			Cell,
			Toast
		},
		mounted() {
			this.$refs.search.setFocus();
		},
		activated() {
			this.search();
			this.hotSearch();
		},
		methods: {
			//获取搜索关键字
			search: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/auction/search.json',
					data: ''
				}).then((result) => {
					this.searchCode = result.data.data;
				}).catch((err) => {

				})
			},
			//热搜
			hotSearch: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/auction/search_hot.json',
					data: ''
				}).then((result) => {
					this.hotWord = result.data.data;
				}).catch((err) => {

				})
			},
			//提交
			submit(val) {
				this.$refs.search.setBlur();
				this.value = val;
				var params = {
					search_keyword: this.value
				}
				if(this.value == '') {
					this.success = !this.success;
					this.msg = '请输入关键字';
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/auction/search.json',
						data: params
					}).then((result) => {
						console.log(result);
						if(result.data.code == 1) {
							this.search_keyword = result.data.data.search_keyword;
							this.$router.push({
								path: '/auctionSearch',
								query: {
									search_keyword: this.search_keyword
								}
							})
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			clearRecord() {
				this.$http({
					method: 'POST',
					url: '/los/api/auction/search_clear.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = '清除成功';
						this.searchCode = [];
					}
				}).catch((err) => {

				})
			},
			resultClick(item) {
				this.submit(item.title);
			},
			getResult(val) {
				if(val != '') {
					this.$http({
						method: 'GET',
						url: '/los/api/auction/search.json?search_keyword=' + val,
						data: ''
					}).then((result) => {
						this.results = val ? this.getSearchList(result.data) : []
					}).catch((err) => {

					})
				}
			},
			getSearchList(val) {
				let rs = []
				for(let i = 0; i < val.data.length; i++) {
					rs.push({
						title: val.data[i].search_keyword,
						other: i
					})
				}
				return rs
			},

			selectClick(val) {
				this.submit(val);
			},
			canelSearch() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.main {
		background-color: #fff;
	}
	
	.search-box {
		height: 48px;
		overflow: hidden;
	}
	
	.tags {
		padding: 0 0.26666rem;
		overflow: hidden;
		margin-top: 0.8rem;
	}
	
	.tags:last-child {
		margin-top: 0;
	}
	
	.tags .tit {
		overflow: hidden;
	}
	
	.tags .tit h5 {
		padding: 0.58666rem 0;
		height: 1.57333rem;
		font-size: 0.4rem;
		line-height: 1;
		display: inline-block;
	}
	
	.tags .tit .reset {
		float: right;
		margin-top: 0.50666rem;
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.tags .tit .reset i {
		float: left;
		margin-top: 0.05333rem;
		margin-right: 0.13333rem;
	}
	
	.tags .list a {
		float: left;
		margin-right: 0.24rem;
		margin-bottom: 0.24rem;
		width: 2.18666rem;
		height: 0.8rem;
		line-height: 0.85333rem;
		font-size: 0.34666rem;
		color: #aaa;
		text-align: center;
		border-radius: 0.05333rem;
		border: solid 1px #eee;
		display: block;
		overflow: hidden;
	}
	
	.tags a:nth-child(4n) {
		margin-right: 0;
	}
</style>
<style>
	#Search .search-box .weui-search-bar {
		background-color: #fff;
	}
	
	#Search .search-box .vux-search-fixed {
		background: #f5f5f5;
	}
	
	#Search .search-box .weui-search-bar__label {
		background-color: #f5f5f5;
	}
	
	#Search .search-box .weui-search-bar:before {
		display: none;
	}
	
	#Search #Search .search-box .weui-search-bar__form {
		background-color: #f5f5f5;
	}
	
	#Search .search-box .weui-search-bar__form:after {
		border-color: #f5f5f5;
		background-color: #f5f5f5;
	}
	
	#Search .search-box .weui-search-bar.weui-search-bar_focusing .weui-search-bar__box {
		background-color: #f5f5f5;
	}
	
	#Search .search-box .weui-search-bar__box .weui-search-bar__input {
		padding: 6px 0;
		height: 32px;
		line-height: 18px;
		box-sizing: border-box;
		font-size: 12px;
	}
	
	#Search .search-box .weui-search-bar__label {
		line-height: 32px;
	}
	
	#Search .search-box .weui-search-bar__label span {
		font-size: 12px;
	}
	
	#Search .search-box .weui-search-bar__cancel-btn {
		line-height: 32px;
		color: #A30000;
		font-size: 12px;
	}
	
	#Search .search-box .weui-search-bar__label .weui-icon-search,
	#Search .search-box .weui-search-bar__box .weui-icon-search {
		margin-top: -2px;
		margin-right: 2px;
		font-size: 0;
		width: 13px;
		height: 13px;
		background: url(../assets/images/home/icon_search_bg.png) center center no-repeat;
		background-size: 100%;
		display: inline-block;
		opacity: 0.6;
	}
	
	#Search .search-box .weui-search-bar__box .weui-icon-search {
		top: 11px;
	}
	
	#Search .search-box .weui-search-bar__box .weui-icon-clear {
		line-height: 32px;
	}
	
	#Search .search-box .vux-search_show .weui-cell {
		padding-left: 0.26666rem !important;
		padding-right: 0.26666rem !important;
	}
	
	#Search .search-box .vux-search_show .weui-cell:before {
		left: 0.26666rem;
	}
</style>